<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Home</title>
    <link rel="stylesheet" href="./css/bootstrap.css" />
    <script src="js/jquery.js"></script>
    <script src="js/poper.js"></script>
    <script src="js/bootstrap.js"></script>
    
    <style>
      .btn-yellow {
        color: black;
        background-color: #fdeb8c;
        border-color: #fdeb8c;
        font-weight: bold;
        border-radius: 30px;
        transition: 0.5s;
      }

      .btn-light {
        color: black;
        background-color: #f6f6f6;
        border-color: #f6f6f6;
        font-weight: bold;
        border-radius: 30px;
        transition: 0.5s;
      }
      .btn:hover {
        border-radius: 0px;
      }
      .banner {
        background-color: #419fe7;
      }

      .card:hover {
        cursor: pointer;
      }
      .card:hover .card-title {
        color: gray;
      }
      .card-img-top {
        transition: 0.4s ease-in;
      }
      .card-img-top:hover {
        transform: scale(1.01);
      }
      .card-title,
      .card-text {
        display: -webkit-box;
        -webkit-box-orient: vertical;
        transition: 0.5s;
        overflow: hidden;
      }
      .card-title {
        -webkit-line-clamp: 2;
      }
      .card-text {
        -webkit-line-clamp: 4;
      }
      .row > * {
        transition: 0.5s;
      }
    </style>
  </head>
  <body>
    <header class="banner">
      <nav class="navbar px-5">
        <img
          src="./img/logo.png"
          style="filter: brightness(0);cursor: pointer;"
          class="navbar-brand"
          alt=""
          width="300"
        />
        <ul class="navbar-nav flex-row"></ul>
      </nav>
    </header>
    <div class="banner">
      <div class="container">
        <h1 class="font-weight-bold pt-5 pb-3" style="font-size: 45px">
          News & press
        </h1>
        <h4
          class="font-weight-bold pb-5"
          style="word-spacing: 3px; letter-spacing: 1px"
        >
          Read up-to-the-minute news from our press team, providing the latest
          developments within Climeworks, and across the climate industry.
        </h4>
      </div>
    </div>
    <main class="my-5">
      <div class="container">
        <h5 class="font-weight-bold mb-4">
          Do you want to report on some new things?
        </h5>
        <button class="btn py-2 px-4 btn-yellow addnews"  data-toggle="modal" data-target="#addNewsModal">Add your news</button>
        <div class="row my-5"></div>
      </div>
    </main>
    <div class="alert alert-warning fixed-top w-50 mx-auto alert-dismissible text-center" style="border-radius: 20px;">
      <button type="button" class="close">&times;</button>
      You don't have login account, Please go login in
    </div>
    <div class="alert alert-success fixed-top w-50 mx-auto alert-dismissible text-center" style="border-radius: 20px;">
      <button type="button" class="close">&times;</button>
      Successfully released news
    </div>
 
 
    <div class="modal fade" id="addNewsModal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
      <div class="modal-dialog modal-xl" >
        <div class="modal-content" style="background: #ffffffd4;">
          <div class="modal-header">
            <h2 class="modal-title" style="font-size: 40px;"  id="exampleModalLabel">
              Publish News
            </h2>
            <button type="button" class="close" data-dismiss="modal" aria-label="Close">
              <span aria-hidden="true">&times;</span>
            </button>
          </div>
          <div class="modal-body">
            <form action="#" class="form">
              <div class="form-group">
                <label for="recipient-name" class="col-form-label font-weight-bold" style="font-size: 20px;">Author:</label>
                <input type="text" autocomplete="off" class="form-control" name="author">
              </div>

              <div class="form-group">
                <label for="recipient-name" class="col-form-label font-weight-bold" style="font-size: 20px;">press:</label>
                <input type="checkbox" autocomplete="off" name="press" >
              </div>

              <div class="form-group">
                <label for="recipient-name" class="col-form-label font-weight-bold" style="font-size: 20px;">imgcover:</label>
                <div>
                  <button class="position-relative btn btn-outline-dark"> <span>添加封面</span> <input type="file" style="opacity: 0;position: absolute; left: 0;top: 0; width: 100%;height: 100%;" autocomplete="off" required name="image" ><img src="" class="uploadimg" width="150" height="100" alt=""></button>
                </div>
              </div>

              <div class="form-group">
                <label for="recipient-name" class="col-form-label font-weight-bold" style="font-size: 20px;">title:</label>
                <input type="text" autocomplete="off" class="form-control" name="title">
              </div>
              <div class="form-group">
                <label for="recipient-name" class="col-form-label font-weight-bold" style="font-size: 20px;">desc:</label>
                <input type="text" autocomplete="off" class="form-control" name="desc">
              </div>
              <div class="form-group">
                <label for="message-text" class="col-form-label  font-weight-bold" style="font-size: 20px;">Content:</label>
                <textarea class="form-control" autocomplete="off" style="height: 500px;" name="content" ></textarea>
              </div>
            </form>
          </div>
          <div class="modal-footer">
            <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
            <button type="button" class="btn btn-primary publish" data-dismiss="modal">publish</button>
          </div>
        </div>
      </div>
    </div>
</div>


<div class="toast show position-fixed" role="alert" aria-live="assertive" aria-atomic="true">
  <div class="toast-header">
    <strong class="mr-auto text-dark">Warning</strong>
    <button type="button" class="ml-2 mb-1 close" data-dismiss="toast" aria-label="Close">
      <span aria-hidden="true">&times;</span>
    </button>
  </div>
  <div class="toast-body mx-auto">
    <p class="text-center font-weight-bold">Can you sure logout ?</p>
    <button class="btn cancle btn-outline-dark">cancle</button>
    <button class="btn px-3 sure btn-outline-danger">sure</button>
  </div>
</div>

    <div class="container">
      <ul class="pagination justify-content-end">

      </ul>
    </div>
    <footer class="bg-dark text-center py-4 text-white">
      © 2023 Climeworks Terms of Use Privacy notice
    </footer>
    <script>
      let page = 1
      let total
      let pages
      function flush() {
        $.get("./php/getAllNews.php" , {admin:localStorage.getItem('username'),page} , (res) => {
        console.log(res);
        total = res.total
        pages = Math.ceil(total / 6)
        $('.pagination').empty()
        $('.pagination').append(`
        <li class="page-item ${page === 1 ? 'disabled' : ''}">
      <button class="page-link prev" ${page === 1 ? 'disabled' : ''} href="#">
        <span>&laquo;</span>
      </button>
    </li>`)
        for(let i = 1 ; i <= pages ; i++) {
          $('.pagination').append($(`
        <li class="page-item pageBtn ${i === page ? 'active' : ''}">
          <button class="page-link"  data-page='${i}'>${i}</button>
        </li>
        `))
        }
        $('.pagination').append(`
        <li class="page-item ${page === pages ? 'disabled' : ''}">
      <button class="page-link next" ${page === pages ? 'disabled' : ''} aria-label="Next">
        <span aria-hidden="true">&raquo;</span>
      </button>
    </li>
    `)
        $('.page-link').click(function(){
          if($(this).hasClass('next')){
            page += 1
            $('.pagination').children('.pageBtn').eq(page - 1).addClass('active').siblings().removeClass('active')
            return flush()
          }
          if($(this).hasClass('prev')){
            page -= 1
            $('.pagination').children('.pageBtn').eq(page - 1).addClass('active').siblings().removeClass('active')
            return flush()
          }
          if(!$(this).hasClass('active')){
            $(this).parent().addClass('active').siblings().removeClass('active')
            page = $(this).data().page
            return flush()
          }
        })
        $('.row').empty()
        res.data.forEach((item) => {
          $(".row").append(`
                <div class="col-12 col-sm-6 col-lg-4">
            <div class="card bg-transparent border-0" data-id="${item.id}">
              <img src="${
                item.image
              }" height="200" class="card-img-top overflow-hidden" alt="">
              <div class="card-body">
                <div class="card-deck align-items-center">
                  <button class="btn ${
                    +item.news_press ? "btn-light" : "btn-yellow"
                  } mr-3">
                    ${+item.news_press ? "Press" : "News"}
                  </button>
                  <i class="time">${item.news_createTime}</i>
                </div>
                <h4 class="card-title">
                  ${item.news_title}
                </h4>
                <p class="card-text">
                  ${item.news_desc}
                </p>
              </div>
            </div>
          </div>
                `)
        })

        $('.card').on('click',function(){location.href = `detail.html?id=${$(this).data().id}`})
      })
      }
      flush()
      $('.alert').hide().css('top',-100)
      $('.addnews').on('click',() => {
        if(!localStorage.getItem('username')) return $('.alert-warning').show().animate({top:100,opacity:1})
        $('.form')[0].reset()
        $('.uploadimg').prop('src','').hide().prev().prev().show()
      })

      let file
      $('.uploadimg').hide()
      $('[name=image]').change(function() {
        file = $(this).prop('files')[0]
        $(this).prev().hide().next().next().prop('src',URL.createObjectURL(file)).show()
      })

      $('.publish').click(() => {
        const data = {
            author:$('[name=author]').val(),
            press:$('[name=press]')[0].checked ? 1 : 0,
            title:$('[name=title]').val(),
            desc:$('[name=desc]').val(),
            image:file,
            content:$('[name=content]').val(),
            admin:localStorage.getItem('username')
          }
        const fd = new FormData()
        for(let i in data) fd.append(i,data[i])
        $.ajax({
          url:'php/addNews.php',
          method:'post',
          contentType:false,
          processData:false,
          data:fd,
          success(res) {
            if(res.code === 200){
              $('.alert-success').show().animate({top:100,opacity:1})
              flush()
            }
          },
        })
      })
      $('.alert .close').on('click',function(){
          $(this).parent().animate({top:-100,opacity:0},500,function(){$(this).hide()})
        })
      localStorage.getItem("username")
        ? $(".navbar-nav")
            .append(
              $(
                `<li class="mx-3"><h4 class="my-auto">Welcome ${localStorage.getItem(
                  "username"
                )}</h4></li>`
              )
            )
            .append(
              $(
                `<li class="mx-3"><a class="text-decoration-none btn btn-yellow logout" href="javascript:void(0)">logout</a></li>`
              )
            )
        : $(".navbar-nav").append(
            $(`<li class="mx-3">
<button class="btn btn-yellow">
<a href="./login.html" class="text-decoration-none text-dark">Login In</a>
</button>
</li>`)
          );

      let lock = true;
      $(window).on("scroll", function () {
        if ($(this).scrollTop() > $("main").offset().top) {
          if (lock)
            $("header")
              .hide()
              .addClass("fixed-top bg-white")
              .removeClass("banner")
              .slideDown(300);
          return (lock = false);
        } else {
          $("header").removeClass("fixed-top bg-white").addClass("banner");
          lock = true;
        }
      })
      if(!localStorage.getItem('username')){
        $('.addnews').html("I can't do anything").prev().html('Not account, go login')
        $('.addnews')[0].dataset.target = 123
        $('footer').addClass('fixed-bottom')
        $('.pagination,.row').remove()
      }
      $('.toast').css({
        right:20,
        top:-150
      }).hide()
      $('.logout').click(() => {
        $('.toast').show().animate({
          top:150
        })
      })
      $('.toast .close').click(() => $('.toast').animate({top:-150},500,function(){$(this).hide()}))
      $('.toast .cancle').click(() => $('.toast').animate({top:-150},500,function(){$(this).hide()}))
      $('.toast .sure').click(() => {
        localStorage.removeItem('username')
        location.reload()
      })
      

      
    </script>
  </body>
</html>
